<script setup lang="ts">
import Docker from "@/components/core/docker/docker.vue";
import DeskTop from "@/components/core/deskTop/deskTop.vue";
import StatusBar from "@/components/core/statusBar/statusBar.vue";
import Window from "@/components/core/window/window.vue";
import useTaskStore from '@/store/task'
import {appConfigType, pagesConfig} from "@/types/component/core";
import {watch} from "vue";

const taskStore = useTaskStore()
taskStore.GET_APPLIST()

watch(() => taskStore.taskList, (newVal) => {

}, {deep: true})
//寻找路径（验证）
const findPage = (app: appConfigType) => {
  return app.pages.find((el: pagesConfig) => el.path === app.currentPath)
}

</script>
<template>
  <div class="home">
    <template v-for="appTask in taskStore.taskList" :key="findPage(appTask).path">
      <Window :appConfig="appTask">
        <component :is="findPage(appTask).path" v-if="findPage(appTask)"></component>
      </Window>
    </template>
    <StatusBar/>
    <DeskTop></DeskTop>
    <Docker></Docker>
  </div>
</template>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
</style>
